<template>
  <h1>循环指令</h1>
  <ul>
  <!-- item从1开始，每执行一次，item的值就+1，一直到数字n
        v-for的效果：执行n次，生成n个li，li里的值为1~n -->
    <li v-for="item in 10">{{item}}</li>
  </ul>
  <ul>
    <li v-for="p in productArr">{{p}}</li>
  </ul>
  <table border="1px">
    <tr>
      <th>序号</th>
      <th>商品</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{item.title}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>

</template>
<script setup>
  import {ref} from "vue";

  const productArr = ref([
    {title:'苹果',price:500,num:1000},
    {title:'香蕉',price:1000,num:2000},
    {title:'葡萄',price:400,num:3000},
    {title:'桃子',price:200,num:4000}
  ]);
  const del = (index)=>{
    productArr.value.splice(index,1);
  }
</script>


<style scoped>

</style>